<template>
	<section class="fs14 addOrderWrap" >
		<div class="content bgwhite">
			<div>
				<p class="mt10 lh30 pl15 pr15 clearfix">
					<span class="fl">买入类型</span>
					<span class="fr" v-show="buyType==='add'">追单</span>
					<span class="fr" v-show="buyType==='reverseAdd'">平仓追反单</span>
				</p>
				<p class="lh30 pl15 pr15 clearfix">
					<span class="fl">商品类型</span>
					<span class="fr">{{curBuyItem.varietyName}}</span>
				</p>
				<p class="lh30 pl15 pr15 clearfix">
					<span class="fl">现价</span>
					<span class="fr">{{curBuyItem.lastPrice}}</span>
				</p>
				<div class="clearfix lh30 pl15 pr15 set">
					<strong class="fl">交易手数</strong>
					<p class="fr lh30">
						<span class="fl lh30 br2 iconfont icon-minus" @click="buyHandNumSub" :class="curBuyHand>0?'bgyellow':'bggray'"></span>
						<input class="fl lh30" type="number" v-model="filterCurBuyHand">
						<span class="fl lh30 bgyellow br2 iconfont icon-plus" @click="buyHandNumAdd"></span>
					</p>
				</div>
			</div>
			<section class="action lh40 mt20 fs14">
				<em class @click.stop="hideAddBuyItem">取消</em>
				<em @click="submitAddBuyItem">确认</em>
			</section>
		</div>
	</section>
</template>

<script>
	import { orderNewOrderAppendNewOrder,orderNewOrderUnwindAndReverseNewOrder } from '@api/order.js'
	export default {
		name: 'append',
		data () {
			return {
				curBuyItem: { },
				curBuyHand: 0,
				buyType: '',
			}
		},
		props: {
			curOrder: {
				type: Object,
				required: true,
				default: {},
			},
			gold: {
				thype: Boolean,
				required: true,
				default: false,
			},
			lastPrice: {
				type: Number,
				required: true,
				default: 0,
			},
			showBuyItem: {
				type: Function,
				required: true,
				default: () => {},
			}

		},
		computed: {
			filterCurBuyHand: {
				get() {
					this.curBuyHand = +this.curBuyHand.toFixed(1);
					return this.curBuyHand;
				},
				set(hand) {
					if (hand) {
						hand = parseFloat(hand).toFixed(1);
						if (hand > 0) {
							this.curBuyHand = +hand;
						}
					}
				}
			},
		},
		methods: {
			//追单
			buy() {
				this.buyType = "add";
				this.curBuyItem = this.curOrder;
				this.showBuyItem(true);
				this.curBuyHand = this.curOrder.handsNum;
			},
			//平追单
			sellBuy() {
				this.buyType = "reverseAdd";
				this.curBuyItem = this.curOrder;
				this.showBuyItem(true);
				this.curBuyHand = this.curOrder.handsNum;
			},
			// 追单的单数调整
			buyHandNumSub() {
				if (this.curOrder.orderMode === 1) {
					var step = 1;
				} else {
					var step = 0.1;
				}
				if (this.curBuyHand > step) {
					this.curBuyHand = this.curBuyHand - step;
				}
				if (step === 0.1) {
					this.curBuyHand = +this.curBuyHand.toFixed(1);
				}
			},
			buyHandNumAdd() {
				if (this.curOrder.orderMode === 1) {
					var step = 1;
				} else {
					var step = 0.1;
				}
				this.curBuyHand = this.curBuyHand + step;
				if (step === 0.1) {
					this.curBuyHand = +this.curBuyHand.toFixed(1);
				}
			},
			hideAddBuyItem() {
				this.initBuyItem();
			},
			submitAddBuyItem() {
				if (this.buyType == "add") {
					var tip = "追单";
					var buyApi  = orderNewOrderAppendNewOrder;
					var params = {
						payType: this.gold ? 0 : 1,
						handsNum: this.curBuyHand,
						batchNo: this.curBuyItem.batchNo,
						orderPrice: this.curBuyItem.lastPrice
					};
				} else if (this.buyType == "reverseAdd") {
					var tip = "平仓反追单";
					var buyApi  = orderNewOrderUnwindAndReverseNewOrder;
					var params = {
						payType: this.gold ? 0 : 1,
						handsNum: this.curBuyHand,
						batchNo: this.curBuyItem.batchNo,
						orderPrice: this.curBuyItem.lastPrice,
						unwindPrice: this.curBuyItem.lastPrice
					};
				} else {
					MessageBox("buyType类型错误");
					return;
				}
				buyApi(params, tip).then(res => {
						if (res.code === 200) {
							if (this.buyType == "add") {
								MessageBox(tip, res.msg);
							} else if (this.buyType == "reverseAdd") {
								MessageBox.alert(res.msg, tip).then(action => {
									this.$router.push({
										path: "/order"
									});
								});
							} else {
								MessageBox('追单类型错误', res.msg);
							}
						} else {
							MessageBox(tip, res.msg);
						}
					})
					.then(() => {
						this.initBuyItem();
					});
			},
			
			//init 追单
			initBuyItem() {
				this.buyType = ""
				this.showBuyItem(false)
				this.curBuyItem = {}
			}
		},
	}
</script>
<style scoped>
	.line {
		border-bottom: 1px solid #e2e2e2;
	}

	.winLossWrap,
	.addOrderWrap {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		z-index: 102;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.winLossWrap .content,
	.addOrderWrap .content {
		position: absolute;
		width: 100%;
		bottom: 0;
		overflow: hidden;
	}

	.winLossWrap .action,
	.addOrderWrap .action {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #ddd;
	}

	.winLossWrap .action em,
	.addOrderWrap .action em {
		width: 50%;
		/*text-align: center;*/
	}

	.winLossWrap .action em:first-child,
	.addOrderWrap .action em:first-child {
		border-right: 1px solid #ddd;
	}

	.winLossWrap .set p,
	.addOrderWrap .set p {
		box-sizing: border-box;
		background-color: #fff;
		border: 1px solid #fff;
		border-radius: 2px;
		overflow: hidden;
	}

	.winLossWrap .set span,
	.addOrderWrap .set span {
		box-sizing: border-box;
		width: 30px;
		height: 30px;
		color: #fff;
	}

	.winLossWrap .set input,
	.addOrderWrap .set input {
		box-sizing: border-box;
		border: 0 none;
		line-height: 30px;
		width: 80px;
		text-align: center;
	}

	.winLossWrap .set .icon,
	.addOrderWrap .set .icon {
		margin-top: 7px;
	}

	.bgyellow {
		background-color: #ef9d2e;
	}

	.bggray {
		background-color: #aaa;
	}
</style>